import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:untitled/pages/FlutterUI/shoe/data.dart';
import 'package:untitled/pages/FlutterUI/shoe/utils.dart';

class ShoeMain extends StatefulWidget {
  const ShoeMain({Key? key}) : super(key: key);

  @override
  State<ShoeMain> createState() => _ShoeMainState();
}

class _ShoeMainState extends State<ShoeMain> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Color(0xFF696D77),Color(0Xff292c36)],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          tileMode: TileMode.clamp
        )
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          leading: IconButton(
            onPressed: (){}, 
            icon: Icon(Icons.arrow_back,size: screenAwareSize(20, context),
            )
          ),
          title: Text("Energy Cloud",style: TextStyle(
            color: Colors.white,
            fontSize: screenAwareSize(18, context),
            ),
            ),
          centerTitle: true,
          actions: [
            IconButton(
              onPressed:(){} , 
              icon: Icon(
                Icons.favorite_border,
                size: screenAwareSize(20.0, context),
                color: Colors.white,
                )
              )
          ],
        ),

        body: SingleChildScrollView(
          child: Column(
            children: [
              ProductScreenTopPart(),
              ProductScreenBottomPart(),

            ],
          ),
        ),
      ),


    );
    
  }
}

class ProductScreenTopPart extends StatefulWidget {
  const ProductScreenTopPart({Key? key}) : super(key: key);

  @override
  State<ProductScreenTopPart> createState() => _ProductScreenTopPartState();
}

class _ProductScreenTopPartState extends State<ProductScreenTopPart> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      width: double.infinity,
      height: screenAwareSize(245.0, context),
      child: Stack(
        children:[
          Stack(
            children: [
              Container(
                child: Image.asset("assets/images/adidas.png",
                    width: double.infinity,
                    height: double.infinity,
                    fit: BoxFit.cover),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 60.0, right: 35.0),
                child: Align(
                  alignment: Alignment.topRight,
                  child: Container(
                    width: screenAwareSize(50.0, context),
                    height: screenAwareSize(50.0, context),
                    decoration: BoxDecoration(
                        color: Colors.black26, shape: BoxShape.circle),
                    child: Image.asset("assets/images/360.png"),
                  ),
                ),
              ),
              Positioned(
                left: screenAwareSize(18.0, context),
                bottom: screenAwareSize(15.0, context),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "Rating",
                      style: TextStyle(color:Color(0xff949598)),
                    ),
                    SizedBox(height: screenAwareSize(8.0, context),),
                    Row(
                      children: [
                        SizedBox(width: 8.0,),
                        Icon(Icons.star,color: Color(0xffffe600),),
                        SizedBox(width: screenAwareSize(5.0, context),),
                        Text("4.5",style: TextStyle(color: Color(0xffffe600)),),
                        SizedBox(width: screenAwareSize(5.0, context),),
                        Text("(378 People)",style: TextStyle(color: Colors.white,fontSize: 14.0),)
                      ],
                    )
                  ],
                ))
            ],
          )
            
        ]
      ),


    );
  }
}

class ProductScreenBottomPart extends StatefulWidget {
  const ProductScreenBottomPart({Key? key}) : super(key: key);

  @override
  State<ProductScreenBottomPart> createState() => _ProductScreenBottomPartState();
}

class _ProductScreenBottomPartState extends State<ProductScreenBottomPart> {
  bool isExpanded = false;
  int currentSizeIndex = 0;
  int currentColorIndex = 0;
  int _counter = 0;

  void _increase() {
    setState(() {
      _counter++;
    });
  }

  void _decrease() {
    setState(() {
      _counter--;
    });
  }

  void _expand() {
    setState(() {
      isExpanded ? isExpanded = false : isExpanded = true;
    });
  }
  List<Widget> colorSelector(){
    List<Widget>? colorItemList = [];
    for (var i = 0; i < colors.length; i++) {
      // List<Color> colors
      colorItemList
          .add(colorItem(colors[i], i == currentColorIndex, context, () {
        setState(() {
          currentColorIndex = i;
        });
      }));
    }

    return colorItemList;

  }
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(padding: EdgeInsets.only(left:screenAwareSize(18.0, context)),
           child: Text("Product Description",style: TextStyle(
            color: Color(0xff949598),
            fontSize: screenAwareSize(10.0, context),
           ),),
          ),
          SizedBox(height: screenAwareSize(8.0, context),),
          Padding(padding: EdgeInsets.only(
            left: screenAwareSize(16, context),
            right: screenAwareSize(18.0, context)
            ),
            child: AnimatedCrossFade(
              firstChild: Text(
                desc,
                maxLines: 2,
                style: TextStyle(color: Colors.white,fontSize: screenAwareSize(10.0, context)),
              ), 
              secondChild: Text(
                desc,
                style: TextStyle(
                  color:Colors.white,
                  fontSize: screenAwareSize(10.0, context)
                ),
              ), 
              crossFadeState: isExpanded ? CrossFadeState.showSecond : CrossFadeState.showFirst, 
              duration: kThemeAnimationDuration),
            ),
            Padding(padding: EdgeInsets.only(
              left: screenAwareSize(26.0, context),
              right: screenAwareSize(18.0, context)
            ),
            child: GestureDetector(
              onTap: _expand,
              child: Text(
                isExpanded? "less":"more...",
                style: TextStyle(
                  color: Color(0xfffb382f),
                  fontWeight: FontWeight.w700
                ),
              ),
            ),
            
          ),
          SizedBox(height: screenAwareSize(12.0, context),),
          Padding(padding: EdgeInsets.only(
            left:screenAwareSize(15.0, context),
            right: screenAwareSize(75.0, context)
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("Size",style: TextStyle(
                  color: Color(0xff949598),
                  fontSize: screenAwareSize(10.0, context)
                ),
                ),
                Text(
                  "Quantity",
                  style: TextStyle(
                    color: Color(0xff949598),
                    fontSize: screenAwareSize(10.0, context),
                  ),
                )
              ],
            ),
          
          ),
          Padding(padding: EdgeInsets.only(
            left: screenAwareSize(20.0, context),
            right: screenAwareSize(10, context)
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                height: screenAwareSize(38.0, context),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: sizeNumlist.map((item) {
                      var index = sizeNumlist.indexOf(item);
                      return GestureDetector(
                        onTap: () {
                          setState(() {
                            currentSizeIndex = index;
                          });
                        },
                        child:
                            sizeItem(item, index == currentSizeIndex, context),
                      );
                    }).toList(),
                ),
              ),
              Padding(padding: EdgeInsets.all(12),
                child: Container(
                  width: screenAwareSize(100.0, context),
                  height: screenAwareSize(30.0, context),
                  decoration: BoxDecoration(
                    color: Color(0xff525663),
                    borderRadius: BorderRadius.circular(5.0)
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Flexible(
                        flex: 3,
                        child: GestureDetector(
                          onTap: _decrease,
                          child: Container(
                            height: double.infinity,
                            child: Center(
                              child: Text("-",style: TextStyle(color: Colors.white,fontSize: 20.0),),
                            ),
                          ),
                        )),
                        divider(),
                        Flexible(
                          flex: 3,
                          child: Container(
                            height: double.infinity,
                            child: Center(
                              child: Text(_counter.toString(),
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 20.0,
                                      )),
                            ),
                          ),
                        ),
                        divider(),
                        Flexible(
                          flex: 3,
                          child: GestureDetector(
                            onTap: _increase,
                            child: Container(
                              height: double.infinity,
                              child: Center(
                                child: Text("+",
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 20.0,
                                        fontFamily: "Montserrat-Bold")),
                              ),
                            ),
                          ),
                        )
                    ],
                  ),
                ),
              ),
              
            ],
          ),
          ),
          SizedBox(height: 8.0,),
          Padding(
            padding: EdgeInsets.only(left: screenAwareSize(18.0, context)),
            child: Text("Select Color",
                style: TextStyle(
                    color: Color(0xFF949598),
                    fontSize: screenAwareSize(10.0, context),
                    )),
          ),
          SizedBox(
            height: screenAwareSize(8.0, context),
          ),
          Container(
            width: double.infinity,
            margin: EdgeInsets.only(left: screenAwareSize(20.0, context)),
            height: screenAwareSize(34.0, context),
            child: Row(
              children: colorSelector(),
            ),
          ),
          SizedBox(
            height: screenAwareSize(8.0, context),
          ),
          SizedBox(
            height: screenAwareSize(8.0, context),
          ),
          Padding(
            padding: EdgeInsets.only(left: screenAwareSize(20.0, context)),
            child: Text("Price",
                style: TextStyle(
                    color: Color(0xFF949598),
                    )),
          ),
          Container(
            width: double.infinity,
            height: screenAwareSize(120.0, context),
            child: Stack(
              alignment: Alignment.topCenter,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(left: screenAwareSize(22.0, context)),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(
                            left: screenAwareSize(18.0, context)),
                        child: Row(
                          children: <Widget>[
                            Text("\$",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: screenAwareSize(26.0, context),
                                   )),
                            SizedBox(width: screenAwareSize(2.0, context)),
                            Text("80",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: screenAwareSize(35.0, context),
                                    ))
                          ],
                        ),
                      ),
                      SizedBox(
                        height: screenAwareSize(10.0, context),
                      ),
                      ClipRRect(
                        borderRadius: BorderRadius.circular(10.0),
                        child: MaterialButton(
                          color: Color(0xFFFB382F),
                          padding: EdgeInsets.symmetric(
                            vertical: screenAwareSize(14.0, context),
                          ),
                          onPressed: () {},
                          child: Align(
                            alignment: Alignment.centerLeft,
                            child: Padding(
                              padding: EdgeInsets.only(
                                  left: screenAwareSize(35.0, context)),
                              child: Text("Add To Cart",
                                  textAlign: TextAlign.left,
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize:
                                          screenAwareSize(15.0, context))),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Positioned(
                  right: -40.0,
                  bottom: -60.0,
                  child: Image.asset("assets/images/cart.png",
                      width: screenAwareSize(190.0, context),
                      height: screenAwareSize(155.0, context),
                      fit: BoxFit.cover),
                ),
              ],
            ),
          )
        ],
      ),

    );
  }
}

Widget sizeItem(String size, bool isSelected, BuildContext context) {
  return Padding(
    padding: const EdgeInsets.only(left: 12.0),
    child: Container(
      width: screenAwareSize(30.0, context),
      height: screenAwareSize(30.0, context),
      decoration: BoxDecoration(
          color: isSelected ? Color(0xFFFC3930) : Color(0xFF525663),
          borderRadius: BorderRadius.circular(5.0),
          boxShadow: [
            BoxShadow(
                color:
                    isSelected ? Colors.black.withOpacity(.5) : Colors.black12,
                offset: Offset(0.0, 10.0),
                blurRadius: 10.0)
          ]),
      child: Center(
        child: Text(size,
            style:
                TextStyle(color: Colors.white, fontFamily: "Montserrat-Bold")),
      ),
    ),
  );
}

Widget colorItem(
    Color color, bool isSelected, BuildContext context, VoidCallback _ontab) {
  return GestureDetector(
    onTap: _ontab,
    child: Padding(
      padding: EdgeInsets.only(left: screenAwareSize(10.0, context)),
      child: Container(
        width: screenAwareSize(30.0, context),
        height: screenAwareSize(30.0, context),
        decoration: BoxDecoration(
            color: Colors.black,
            borderRadius: BorderRadius.circular(5.0),
            boxShadow: isSelected
                ? [
                    BoxShadow(
                        color: Colors.black.withOpacity(.8),
                        blurRadius: 10.0,
                        offset: Offset(0.0, 10.0))
                  ]
                : []),
        child: ClipPath(
          clipper: MClipper(),
          child: Container(
            width: double.infinity,
            height: double.infinity,
            color: color,
          ),
        ),
      ),
    ),
  );
}

class MClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = new Path();

    path.lineTo(0.0, size.height);
    path.lineTo(size.width * 0.2, size.height);
    path.lineTo(size.width, size.height * 0.2);
    path.lineTo(size.width, 0.0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

Widget divider() {
  return Padding(
    padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
    child: Container(
      width: 0.8,
      color: Colors.black,
    ),
  );
}